<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            object-fit:fill;
        }
        #app{
            width: 1800px;
            height: 1500px;
            border: 1px solid red;
        }
    </style>
    
</head>
<body>
    <div id="app" >
        <h1 style="text-align: center;">{{showname}}</h1>
        <mycpn :getlist="list" @addname="addnewname"></mycpn>
        
    </div>
    <template id="imgbox">
        <div  >
            <div  style=" float: left;width: 800px;" v-for="(item,index) in getlist" :key="index" @click="tap(index)">
                <span style="text-align: center;">{{item.name}}</span>
                <img :src="item.imgurl" alt=""  style="width: 300px;height:300px;" />


            </div>
            
        </div>
    </template>
    <script src="./vue.js"></script>
    
    
    <script>
        
        const app = new Vue({
            el:"#app",
            data(){
                return {
                    list:[
                        {
                            name:"手机",
                            imgurl:"./image/20200327230206_5FSLT.jpeg"
                        },
                        {
                            name:"电脑",
                            imgurl:"./image/7be03a5c9d654189af289d0645a0da9c.jpeg"
                        },
                        {
                            name:"平板",
                            imgurl:"./image/v2-58079bdddda38d12f08009079cb85448_r.jpg"
                        },
                        {
                            name:"手表",
                            imgurl:"./image/20140926101524676.jpg"
                        },
                        {
                            name:"耳机",
                            imgurl:"./image/20200505152842_rjjnr.jpg"
                        },
                        {
                            name:"音响",
                            imgurl:"./image/20210508152139_2ee8d.jpeg"
                        },
                        {
                            name:"投影仪",
                            imgurl:"./image/20200408114356_umkyc.jpg"
                        },
                        {
                            name:"路由器",
                            imgurl:"./image/20200327230205_eiNRW.jpeg"
                        }
                    ],
                    showname:"",
                    chooseindex:0
                    
                }
            },
            components:{
                mycpn:{
                    template:"#imgbox",
                    props:["getlist"],
                    data(){
                        return{

                        }
                    },
                    methods:{
                        tap(index){
                            let newname=this.getlist;
                            this.$emit("addname",newname,index)
                        }
                    }
                    
                }
            },
            methods:{
                addnewname(val,index){
                    this.showname = val[index].name
                    this.chooseindex=index;
                   
                }
            }
        })
    </script>
</body>
</html>